<template>
    <view>
        <uni-forms :modelValue="ruleForm" :rules="rules" ref="ruleForm" label-width="0" validateTrigger="blur">
            <view class="title" style="margin-top: 40rpx;">
                {{$lang('选择打包采购单')}}：
            </view>
            <view class="table" v-if="ruleForm.list.length > 0">
                <uni-table border :emptyText="$lang('暂无数据')">
                    <uni-tr class="tableHead">
                        <uni-th align="center" v-for="(item,index) in tableColumn" :key="index">{{$lang(item.label)}}</uni-th>
                        <uni-th align="center" v-if="ruleForm.list.length > 1">{{$lang('操作')}}</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(item,index) in ruleForm.list" :key="index">
                        <uni-td align="center" v-for="(data,dataIndex) in tableColumn" :key="dataIndex">
                            <text v-if="data.value == 'index'">{{index + 1}}</text>
                            <view v-else-if="data.value == 'image'">
                                <image :src="baseUrl + item[data.value]" style="width: 100rpx;height: 100rpx;"></image>
                            </view>
                            <view v-else-if="data.value == 'num'">
                                <uni-forms-item :name="'list.' + index + '.num'" :rules="rules.required.rules">
                                    <uni-easyinput v-model="item.num" :placeholder="$lang('请输入')" />
                                </uni-forms-item>
                            </view>
                            <view v-else-if="data.value == 'money'">
                                <uni-forms-item :name="'list.' + index + '.money'" :rules="rules.required.rules">
                                    <uni-easyinput v-model="item.money" :placeholder="$lang('请输入')" />
                                </uni-forms-item>
                            </view>
                            <text v-else>{{item[data.value]}}</text>
                        </uni-td>
                        <uni-td align="center" v-if="ruleForm.list.length > 1">
                            <view class="uni-group">
                                <button class="text-btn" size="mini" type="warn">{{$lang('删除')}}</button>
                            </view>
                        </uni-td>
                    </uni-tr>
                </uni-table>
            </view>
            <view class="title" style="margin-top: 65rpx;">
                {{$lang('已选中')}}：<text>{{ruleForm.list.length}}{{$lang('个采购单')}}</text>
            </view>
            <view class="form noLabel">
                <uni-forms-item name="sendtime">
                    <view class="li">
                        <view class="fl"><text class="red">*</text>{{$lang('发货时间')}}：</view>
                        <view class="fr">
                            <uni-datetime-picker type="date" :clear-icon="false" v-model="ruleForm.sendtime" :placeholder="$lang('年/月/日')"  />
                        </view>
                    </view>
                </uni-forms-item>
                <uni-forms-item name="port_address">
                    <view class="li">
                        <view class="fl"><text class="red">*</text>{{$lang('港口地址')}}：</view>
                        <view class="fr">
                            <input type="text" :placeholder="$lang('请输入港口地址')" v-model="ruleForm.port_address">
                        </view>
                    </view>
                </uni-forms-item>
                <uni-forms-item name="port">
                    <view class="li">
                        <view class="fl"><text class="red">*</text>{{$lang('港口')}}：</view>
                        <view class="fr">
                            <input type="text" :placeholder="$lang('请输入港口')" v-model="ruleForm.port">
                        </view>
                    </view>
                </uni-forms-item>
                <uni-forms-item name="expected_arrival_time">
                    <view class="li">
                        <view class="fl"><text class="red">*</text>{{$lang('预计抵达时间')}}：</view>
                        <view class="fr">
                            <uni-datetime-picker type="date" :clear-icon="false" v-model="ruleForm.expected_arrival_time" :placeholder="$lang('年/月/日')"  />
                        </view>
                    </view>
                </uni-forms-item>
                <uni-forms-item name="container_tracking_number">
                    <view class="li">
                        <view class="fl"><text class="red">*</text>{{$lang('货柜单号')}}：</view>
                        <view class="fr">
                            <input type="text" :placeholder="$lang('请输入货柜单号')" v-model="ruleForm.container_tracking_number">
                        </view>
                    </view>
                </uni-forms-item>
                <uni-forms-item name="container_num">
                    <view class="li">
                        <view class="fl"><text class="red">*</text>{{$lang('货柜号')}}：</view>
                        <view class="fr">
                            <input type="text" :placeholder="$lang('请输入货柜号')" v-model="ruleForm.container_num">
                        </view>
                    </view>
                </uni-forms-item>
                <uni-forms-item name="ocean_freight">
                    <view class="li">
                        <view class="fl"><text class="red">*</text>{{$lang('海运费')}}：</view>
                        <view class="fr">
                            <input type="text" :placeholder="$lang('请输入海运费') + '（RMB）'" v-model="ruleForm.ocean_freight">
                        </view>
                    </view>
                </uni-forms-item>
            </view>
        </uni-forms>
        <view class="footerFen"></view>
        <view class="footer">
            <view class="top">
                <view class="fl" @click="$common.back()">{{$lang('取消')}}</view>
                <view class="fr" @click="submit">{{$lang('确认发货')}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        purchaseSendGoodsPageData,
        purchaseSendGoods
    } from '../../api/api'
    export default {
        data() {
            return {
                ruleForm:{
                    list:[],
                    sendtime:'',
                    port_address:'',
                    expected_arrival_time:'',
                    port:'',
                },
                rules:{
                    required: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入') }
                        ]
                    },
                    sendtime: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择发货时间') }
                        ]
                    },
                    port_address: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入港口地址') }
                        ]
                    },
                    port: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入港口') }
                        ]
                    },
                    expected_arrival_time: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请选择预计抵达时间') }
                        ]
                    },
                    container_tracking_number: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入货柜单号') }
                        ]
                    },
                    container_num: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入货柜单号') }
                        ]
                    },
                    ocean_freight: {
                        rules: [
                            { required: true, errorMessage: this.$lang('请输入海运费') }
                        ]
                    },
                },
                tableColumn:[
                    {label:this.$lang('序号'),value:'index'},
                    {label:this.$lang('采购单编号'),value:'code'},
                    {label:this.$lang('一级分类'),value:'category_one_name'},
                    {label:this.$lang('二级分类'),value:'category_two_name'},
                    {label:this.$lang('产品编号'),value:'goods_code'},
                    {label:this.$lang('产品名称'),value:'goods_name'},
                    {label:this.$lang('尺寸(CM)'),value:'size'},
                    {label:this.$lang('图片'),value:'image'},
                    {label:this.$lang('数量'),value:'num'},
                    {label:this.$lang('单位'),value:'unit'},
                    {label:this.$lang('本次付款价格'),value:'money'},
                    {label:this.$lang('产品属性'),value:'product_attributes'},
                    {label:this.$lang('产品归属'),value:'product_ownership_name'},
                ],
                ids:[],
                baseUrl:''
            }
        },
        onLoad(options) {
            this.baseUrl = this.$config.baseUrl;
            uni.setNavigationBarTitle({
                title: this.$lang('打包装柜')
            });
            this.ids = JSON.parse(options.ids);
            this.getList();
        },
        methods: {
            getList(){
                purchaseSendGoodsPageData({
                    ids:this.ids
                }).then(res => {
                    this.ruleForm.list = res.data;
                    this.ruleForm.list.forEach(item => {
                        item.category_one_name = item.category_one.name;
                        item.category_two_name = item.category_two.name;
                        item.product_ownership_name = item.product_ownership ? item.product_ownership.name : '-';
                    });
                    this.ruleForm.list = JSON.parse(JSON.stringify(this.ruleForm.list));
                })
            },
            submit(){
                this.$refs.ruleForm.validate().then(valid => {
                    purchaseSendGoods(this.ruleForm).then(res => {
                        uni.hideLoading();
                        if(res.code == 1){
                            uni.showToast({
                                title:this.$lang('打包发货成功'),
                                icon:'none'
                            });
                            setTimeout(() => {
                                this.$common.back();
                                uni.$emit('returnData',1);
                            },500)
                        }
                    })
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .title{
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 30rpx;
        font-size: 32rpx;
        color: #222;
        &:after{
            content: '';
            width: 8rpx;
            height: 30rpx;
            border-radius: 8rpx;
            background: #365aa6;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        text{
            font-size: 36rpx;
            color: #365aa6;
        }
    }
    .table{
        padding: 25rpx 25rpx 0 25rpx;
    }
    .form{
        padding: 0 25rpx;
        margin-top: 30rpx;
        .li{
            display: flex;
            align-items: center;
            .fl{
                width: 225rpx;
                font-size: 30rpx;
                color: #555;
                &.red{
                    color: #f90505;
                }
            }
            .fr{
                flex: 1;
                input{
                    font-size: 32rpx;
                    border: 1px solid #757575;
                    border-radius: 8rpx;
                    padding: 0 25rpx;
                    height: 90rpx;
                }
                /deep/ .uni-date{
                    position: relative;
                    .uni-date-picker__container{
                        position: absolute;
                        left: -20%;
                        .uni-popper__arrow{
                            left: 50%;
                        }
                    }
                    .uni-date-x--border{
                        border-color: #757575;
                        border-radius: 8rpx;
                        .uni-date-x{
                            border-radius: 8rpx;
                            font-size: 32rpx;
                            .uni-icons{
                                font-size: 40rpx !important;
                                color: #365aa6 !important;
                            }
                            .uni-date__x-input{
                                height: 90rpx;
                                line-height: 90rpx;
                                font-size: 32rpx;
                                margin-left: 12rpx;
                            }
                        }
                    }
                }
            }
        }
    }
    .footerFen{
        height: 179rpx;
    }
    .footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 24rpx 24rpx 45rpx 24rpx;
        background: #fff;
        z-index: 2;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .fl{
                width: 280rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                font-size: 36rpx;
                color: #555;
                border: 1px solid #c9c9c9;
                background: #fff;
            }
            .fr{
                width: 400rpx;
                height: 90rpx;
                border-radius: 90rpx;
                text-align: center;
                line-height: 90rpx;
                background: #365aa6;
                color: #fff;
                font-size: 36rpx;
            }
        }
    }
</style>
